import React,{FC,lazy,useEffect} from "react";
import {stateType,connect,ConnectProps,Loading} from 'umi'
import { Spin } from 'antd';
// ConnectProps可以快速拿到想要的dispath,match，location等api
interface pageProps extends ConnectProps{
    data:stateType,
    loading:Loading,

}
const  Product:FC<pageProps>=({data,loading,dispatch})=>{
    // console.log(props)
    useEffect(()=>{
        dispatch!({type:'product/getProductList',})
      },[])
      console.log(data)
      let html
      if(data.err){
        html=<h1>{data.err}</h1>
      }else{
        html=<fieldset>

            <legend>商品</legend>
            <h1>列表</h1>
            <ul>
                    {data.productList.map((item:any)=>{
                        return <li key={item.id}>{item.title} &nbsp;{item.price}</li>
                    })}
            </ul>
        </fieldset>
      }
    return(
       <Spin spinning={loading} size="large">
        {html}
       </Spin>
    )
}
export default connect(({product,loading}:{product:stateType,loading:Loading})=>({data:product,loading:loading.models.product}))(Product)